<template>
	<view>
		<view class="m-item m-item_flag" ref="nessageChild" :id="'message'+id">
			<view class="m-left" :style="`width: ${leftWidthReal}`">
				<image class="head_icon" src="../static/img/leiyunAI.jpeg" v-if="message.user=='home'"></image>
			</view>
			<view class="m-content" v-if="!message.loading"
				:style="`padding-bottom: ${currentMax<id+1&&message.user=='home'?'0px':'0px'}`">
				<view class="m-content-head" :class="{'m-content-head-right':message.user=='customer'}">
					<!-- 用户 -->
					<view v-if="message.user=='customer'" :class="'m-content-head-'+message.user" @longpress="copy(message.user)">
						{{message.content}}
					</view>
					<!-- 机器人 -->
					<view v-if="message.user=='home'" :class="'m-content-head-'+message.user" @longpress="copy(message.user)">
						<!-- 解析markdown -->
						<!-- <ua-markdown :source="message.content" :width="calculatedWidth" :showLine="false" /> -->
						<font-append :content="message.content" :isAnimation="this.id > this.currentMax" @scrollBtm='scrollBtm' />
					</view>
				</view>
			</view>
			<view class="m-right" v-if="!message.loading" :style="`width: ${rightWidthReal}`">
				<image class="head_icon" src="../static/img/my_ask.jpg" v-if="message.user=='customer'"></image>
				<view class="copy-parent" v-if="message.user=='home'">
				</view>
			</view>

			<view v-if="message.loading" style="width: 80px;">
				<view class="m-content-head m-content-head-home" style="padding-left: 20px;padding-top: 15px;">
					<loading-dots></loading-dots>
				</view>
				<text style="font-size: 12px;margin-left: 10px;">正在思考中</text>
			</view>
		</view>


		<!-- 如果是最后一条记录，则在后面加上引导 -->
		<view class="m-item_flag" v-if="currentMax===id+1 && guideInfo!==null"
			style="padding-bottom: 60px;padding-top: 40px;">
			<view class="guide">
				<view class="guide_title" v-if="guideInfo.title!==''">
					{{guideInfo.title}}
				</view>
				<view class="guide_text" v-if="guideInfo.content!==''">
					{{guideInfo.content}}
				</view>
				<view class="guide_select clickEacct" @click="inputSelect(item)" v-for="(item,index) in guideInfo.selectList"
					:key="index">
					<text>{{item}}</text>
					<uni-icons type="right" size="14" class="p-right-icon"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				robatIcon: "",
				myIcon: '',
				guideInfo: null,
				messageContentOrigin: "",
			}
		},
		props: ['message', 'id', 'currentMax'],
		beforeUpdate() {
			this.initGuideInfo();
		},
		computed: {
			calculatedWidth() {
				return `calc(100vw - 120px)`;
			},
			leftWidthReal() {
				if (this.message.user === 'customer') {
					return "50px";
				} else {
					return '60px';
				}
			},
			rightWidthReal() {
				if (this.message.user === 'home') {
					return "50px";
				} else {
					return '60px';
				}
			}
		},
		created() {
			console.log("beforeUpdate_created");
			this.messageContentOrigin = this.message.content;
			this.initGuideInfo();
			console.log(this.message, this.id, this.currentMax);
		},
		updated() {},
		methods: {
			scrollBtm() {
				this.$root.forceScrollBottom(); // app根组件 h5会报错
			},
			initGuideInfo: function() {
				if (this.id + 1 === this.currentMax && this.guideInfo === null) {
					// 通知父组件去滑动
					// this.$parent.forceScrollBottom();
					this.guideInfo = {
						title: '123',
						content: '123',
						selectList: ['wo', 'ai', 'ni']
					};
				}
			},
			inputSelect: function(selectValue) {
				this.$parent.getInputMessage({
					type: 'text',
					content: selectValue
				});
			},
			copy: function(msg) {
				const that = this;
				if (this.messageContentOrigin === '') {
					this.messageContentOrigin = this.message.content;
				}
				uni.setClipboardData({
					data: this.messageContentOrigin
				});
			}
		}
	}
</script>

<style>
	.guide {
		background-color: white;
		margin-left: 20px;
		margin-right: 20px;
		padding: 10px;
		border-radius: 5px;
	}

	.guide_title {
		font-size: 16px;
		font-weight: bold;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.guide_text {
		font-size: 14px;
		color: #575659;
		margin-bottom: 10px;
	}

	.guide_select {
		margin-top: 4px;
		display: flex;
		padding: 10px;
		background-color: #f5f6f8;
	}

	.guide_select text {
		width: 100%;
		font-size: 14px;
		font-weight: 600;
	}

	/* 点击效果 */
	.clickEacct {
		transition: background-color 0.3s ease;
		/* 过渡效果 */
	}

	.clickEacct:active {
		background-color: #ddd;
		/* 点击时的背景色 */
	}



	.m-item {
		display: flex;
		flex-direction: row;
		/* padding-top: 20px; */
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.m-item_flag {}

	.m-left {
		display: flex;
		width: 60px;
		justify-content: center;
		align-items: flex-start;
	}

	.m-content {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		word-break: break-all;
	}

	.m-right {
		display: flex;
		width: 60px;
		justify-content: center;
		align-items: flex-start;
	}

	.copy-parent {
		display: flex;
		width: 100%;
		/* align-items: center; */
		justify-content: flex-start;
		height: 100%;
	}

	.copy-parent .copy-child {
		font-size: 12px;
		padding: 10px;
		color: #383b9a;
	}


	.head_icon {
		width: 40px;
		height: 40px;
		border-radius: 7px;
	}

	.m-content-head {
		position: relative;
	}

	.m-content-head-right {
		display: flex;
		justify-content: flex-end;
		user-select: none;
	}

	.m-content-head-home {
		font-size: 14px;
		text-align: left;
		/* background: #1482d1; */
		background: white;
		border: 0.5px white solid;
		border-radius: 10px;
		padding: 10px;
		color: black;
		white-space: pre-line;
		white-space: pre-wrap;
		/* -webkit-user-select: text; */
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	}

	.m-content-head-home:before {
		border: 7px solid transparent;
		border-right: 7px solid white;
		left: -13px;
		width: 0;
		height: 0;
		position: absolute;
		content: ' '
	}

	.m-content-head-customer {
		border: 0.5px #a7dddf solid;
		/* border: 0.5px white solid; */
		background-color: #a7dddf;
		/* background-color: white; */
		border-radius: 10px;
		padding: 10px;
		white-space: pre-line;
		white-space: pre-wrap;
		/* -webkit-user-select: text; */
		color: #000000;

		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		/* color: black; */
	}

	.m-content-head-customer:after {
		border: 7px solid transparent;
		border-left: 7px solid #a7dddf;
		/* border-left: 7px solid white; */
		top: 10px;
		right: -13px;
		width: 0;
		height: 0;
		position: absolute;
		content: ' '
	}
</style>